<html>

<head>
   <meta charset="UTF-8" />
   <title>ESP8266 DATA Show</title>
   <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="https://code.highcharts.com/highcharts.js"></script>
</head>

<body>
   <div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
   <script language="JavaScript">
      $(document).ready(function () {
         var speel = 5000;
         var chart = {
            type: 'spline',
            animation: Highcharts.svg, // don't animate in IE < IE 10.
            marginRight: 10,
            events: {
               load: function () {
                  // set up the updating of the chart each second
                  var series = this.series[0];
                  setInterval(function () {
                     $.ajax({
                        type: "get",
                        url: "http://172.30.54.30/data",
                        async: true,
                        dataType: "json",
                        success: function (reslut) {
                           myupdate(reslut);
                        },
                        error: function (errorMsg) {
                           myupdate(404)
                        }
                     });
                  }, speel);
                  function myupdate(y) {
                     var x = (new Date()).getTime();
                     series.addPoint([x, y], true, true);
                  }
               }
            }
         };
         var title = {
            text: 'Light data'
         };
         var xAxis = {
            type: 'datetime',
            tickPixelInterval: 150
         };
         var yAxis = {
            title: {
               text: 'Value'
            },
            plotLines: [{
               value: 0,
               width: 1,
               color: '#808080'
            }]
         };
         var tooltip = {
            formatter: function () {
               return '<b>' + this.series.name + '</b><br/>' +
                  Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                  Highcharts.numberFormat(this.y, 2);
            }
         };
         var plotOptions = {
            area: {
               pointStart: 1940,
               marker: {
                  enabled: false,
                  symbol: 'circle',
                  radius: 2,
                  states: {
                     hover: {
                        enabled: true
                     }
                  }
               }
            }
         };
         var legend = {
            enabled: false
         };
         var exporting = {
            enabled: false
         };
         var series = [{
            name: 'light value',
            data: (function () {
               // generate an array of random data
               var data = [], time = (new Date()).getTime(), i;
               for (i = -19; i <= 0; i += 1) {
                  data.push({
                     x: time + i * speel,
                     y: Math.random() * 20000
                  });
               }
               return data;
            }())
         }];

         var json = {};
         json.chart = chart;
         json.title = title;
         json.tooltip = tooltip;
         json.xAxis = xAxis;
         json.yAxis = yAxis;
         json.legend = legend;
         json.exporting = exporting;
         json.series = series;
         json.plotOptions = plotOptions;


         Highcharts.setOptions({
            global: {
               useUTC: false
            }
         });
         $('#container').highcharts(json);

      });
   </script>
</body>

</html>